import React, { useCallback, useEffect, useRef, useState } from 'react';
import '../indexRoom.less';
import { MobileOutlined, UserOutlined } from '@ant-design/icons';
import {
  Input,
  Button,
  Form,
  Select,
  DatePicker,
  Row,
  Col,
  message,
  Popconfirm,
  Switch,
} from 'antd';
import CurrentUser from './CurrentUser';
import moment from 'moment';
import dayjs from 'dayjs';
import { GetRoomMsg, GetRoomTimer, NoCardcheckout } from '../service';
import { useDispatch, useSelector } from 'react-redux';
import { v4 as uuidv4 } from 'uuid';
import {
  changeChinkListFlag,
  changeRoomChinkList,
  changeTrueList,
  setGetNowCardMsg,
} from '../counter/counterSlice';
import { useDeleteConfirm } from '@/hooks/useAlartMolder';
import { calculateDifferenceInDays } from '../RoomFunc';
import { useIntl } from '@umijs/max';
import { Read_Card, SendCard } from '@/utils/Send';

interface UserInfo {
  username: string;
  phone: string;
  idcard: string;
  cardId: string;
  roomId: string;
  Checktime?: number;
  roomNo: string;
  childRooms: string[];
}
interface userprops {
  userMsg: UserInfo[] | any;
  ChildRoom: string[];
  setsendMsg: (event: stateObj) => void;
  setType: (event: string) => void;
  setGetcardMsg: (event: object) => void;
  handleOk: () => void;
  setchildRoomNum: (Event: string) => void;
  setGETID: (Event: string) => void;
  setCardMessage: (Event: string) => void;
}
const InformationCard: React.FC<userprops> = ({
  userMsg,
  setsendMsg,
  setType,
  setGetcardMsg,
  handleOk,
  setchildRoomNum,
  setGETID,
  setCardMessage,
}) => {
  const intl = useIntl();
  const [form1] = Form.useForm();
  const [form2] = Form.useForm();
  // 选择子房间
  const [selectedOption, setSelectedOption] = useState('');
  // 当前发卡时间
  const [checkIntimer] = useState(moment());
  // 退房时间
  const [TRoomTimer, setTRoomTimer] = useState();
  // 钟点房的限制
  const [isFloorVisible, setIsFloorVisible] = useState<boolean>(false);
  // 钟点房时间
  const [isHourlyRoom, setisHourlyRoom] = useState('');
  // 钟点房状态
  const [HourlyRoomflag, setHourlyRoomflag] = useState(false);
  // 判断是否续住发卡
  const [useChangeFlag, setuseChangeFlag] = useState(false);
  // 下拉选中续时间然后计算出对应的天数
  const [Option1, setOption1] = useState([
    {
      value: 1,
      label: '1 ' + intl.formatMessage({ id: 'business.day' }),
    },
  ]);
  // 客人卡发卡成功后
  const [Xzday, setXzday] = useState(false);
  const [state, setState] = useState<stateObj>({
    T1: 0, // 默认加密
    T2: 0, // 默认加密
    T3: 0, // 默认加密
    T4: 0, // 覆写前卡
    T5: 0, // 超时报警
    T6: 0, // 静音
    T7: 0, // 反锁
    T8: 0, // 其他状态
    day: '', // 默认入住天数
  });
  let getRoomMsg = async () => {
    let { data } = await GetRoomMsg();
    setisHourlyRoom(data.defaultHourlyRoomTime);
    form1.setFieldValue('UseroomFee', data.defaultCheckInSource);
    form2.setFieldValue('username', data.defaultCheckInPeople);
    form2.setFieldValue('phone', data.defaultCheckInMobile);
    if (userMsg.checkInEndTime) {
      let str = calculateDifferenceInDays(userMsg.checkInEndTime);
      form1.setFieldValue('renewal', str);
    }
    const newOptions = [];
    for (let a = 2; a <= 60; a++) {
      newOptions.push({ value: a, label: `${a} ${intl.formatMessage({ id: 'business.day' })}` });
    }
    setOption1([...Option1, ...newOptions]);
    setState((prevState) => ({
      ...prevState,
      T1: data.defaultCardT1ReservedAlarm.toString(),
      T2: data.defaultCardT2ReservedAlarm.toString(),
      T3: data.defaultCardT3ReservedAlarm.toString(),
      T4: data.defaultCardT4EnableTheBeforeCardAlarm.toString(),
      T5: data.defaultCardT5GetPowerAlarm.toString(),
      T6: data.defaultCardT6TimeoutFalseLockAlarm.toString(),
      T7: data.defaultCardT7MuteAlarm.toString(),
      T8: data.defaultCardT8LockedAlarm.toString(),
      day: data.defaultCheckinDay.toString(),
    }));
    // 获取默认离店时间 取前两位
    if (data.defaultCheckoutTime) {
      var firstTwoDigits = data.defaultCheckoutTime.substring(0, 2);
      setTRoomTimer(firstTwoDigits);
    } else {
      message.error(
        intl.formatMessage({
          id: 'business.Please configure the relevant information in the business settings',
        }),
      );
    }
  };
  // 判断是否为钟点房
  const IsHourlyRoom = () => {
    if (userMsg.isHourlyRoom == 1 || userMsg.checkInHourlyRoom == 1) {
      setIsFloorVisible(true);
      setHourlyRoomflag(true);
    }
  };
  // 使用redux 用户监听发卡和退卡成功后的操作
  const value = useSelector((state) => state.counter.value);
  // 用于判断各种发卡按钮 更具不同的值来判断显示 发卡个退卡的显示
  const Cardname = useSelector((state) => state.counter.Cardname);

  useEffect(() => {
    if (Cardname == '续卡') {
      setuseChangeFlag(true);
      setuseMsgFlag(true);
    }
    return () => {
      setuseChangeFlag(false);
    };
  }, [Cardname]);

  useEffect(() => {
    if (value == true) {
      setHourlyRoomflag(true);
    }
  }, [value]);
  useEffect(() => {
    getRoomMsg();
    IsHourlyRoom();

    if (userMsg.status != '3') {
      dispatch(changeChinkListFlag(true));
    }
  }, []);
  // 监听是否钟点房的变化
  useEffect(() => {
    // 只有当TRoomTimer有值时，才执行后续逻辑
    if (TRoomTimer) {
      if (isFloorVisible && !HourlyRoomflag) {
        let currentDate = moment()
          .add(parseInt(isHourlyRoom), 'hours')
          .format('YYYY-MM-DD HH:mm:ss');
        form1.setFieldValue('checkOutTEO', moment(currentDate));
      } else if (userMsg.status != 1) {
        if (!Xzday) {
          form1.setFieldValue('checkOutTEO', moment(userMsg.checkout));
        }
      }
      // 监听关闭了不是钟点房 时间和 选择时间的按钮回到原位
      if (!isFloorVisible) {
        if (userMsg.status == 3) {
          // 续住赋值时间
          if (!Xzday) {
            let str = calculateDifferenceInDays(
              userMsg.checkout ? userMsg.checkout : userMsg.checkInEndTime,
            );
            form1.setFieldValue('Stay', str);
            form1.setFieldValue(
              'checkOutTEO',
              moment(userMsg.checkout ? userMsg.checkout : userMsg.checkInEndTime),
            );
          }
        } else {
          // 直接打开房间赋值时间
          if (!Xzday) {
            form1.setFieldValue(
              'checkOutTEO',
              moment().add(state.day, 'days').startOf('day').add(TRoomTimer, 'hours'),
            );
            form1.setFieldValue('Stay', state.day);
          }
        }
      }
    }
  }, [isFloorVisible, TRoomTimer, HourlyRoomflag, userMsg, isHourlyRoom]);

  const handleSelectChange = (value: string) => {
    setSelectedOption(value);
  };

  const source = [
    intl.formatMessage({ id: 'business.Arrived at the store' }),
    intl.formatMessage({ id: 'business.Fliggy' }),
    intl.formatMessage({ id: 'business.Ctrip' }),
    intl.formatMessage({ id: 'business.Qunar' }),
    intl.formatMessage({ id: 'business.AliPay' }),
    intl.formatMessage({ id: 'business.Others' }),
  ];
  const [dataMsg, setdataMsg] = useState<Object>();
  const handleSubmit = async () => {
    try {
      const values1 = await form1.validateFields();
      const values2 = await form2.validateFields();
      const now = dayjs();
      let changetimer: string = '';
      // return false
      if (userMsg.status == 3 && userMsg.checkInHourlyRoom == 0) {
        // 发卡后 普通开房时间
        changetimer = dayjs(values1.checkOut.$d).format('YYYY-MM-DD HH:mm:ss');
      } else {
        if (userMsg.checkInHourlyRoom == 1 && isFloorVisible == true) {
          // 发卡后 钟点房时间
          changetimer = dayjs(values1.checkOut.$d).format('YYYY-MM-DD HH:mm:ss');
        } else if (isFloorVisible == true && userMsg.status == 1) {
          // 钟点房开房时间
          changetimer = dayjs(values1.checkOutTEO.$d).format('YYYY-MM-DD HH:mm:ss');
        } else {
          // 普通开房时间
          changetimer = dayjs(values1.checkOutTEO.$d).format('YYYY-MM-DD HH:mm:ss');
        }
      }
      // 套房发卡
      if (userMsg.childRooms) {
        let result = userMsg.childRooms.filter((item: { roomId: string }) => {
          return item.roomId == values2.childroom;
        });

        let data = {
          realName: values2.username,
          mobile: values2.phone,
          checkin: '',
          cardNum: '',
          roomNo: result[0].roomName,
          status: '0',
          UUID: uuidv4(),
        };
        let data2 = {
          username: values2.username,
          phone: values2.phone,
          idcard: now.format('YYYY-MM-DD HH:mm:ss'),
          cardId: '未发房卡',
          roomId: userMsg.childRooms,
          endtime: changetimer,
          source: values1.UseroomFee,
          isHourlyRoom: isFloorVisible == true ? '1' : '0',
          ...userMsg,
        };
        setdataMsg(data); // 传给子组件
        setGetcardMsg(data2); // 穿给父组件提交入住记录
        setuseMsgFlag(true);
      } else {
        // 普通房发卡
        let data = {
          realName: values2.username,
          mobile: values2.phone,
          checkin: '',
          cardNum: '',
          roomNo: userMsg.roomNo,
          status: '0',
          UUID: uuidv4(),
        };
        let data2 = {
          username: values2.username,
          phone: values2.phone,
          idcard: now.format('YYYY-MM-DD HH:mm:ss'),
          cardId: '未发房卡',
          roomId: userMsg.roomNo,
          endtime: changetimer,
          source: values1.UseroomFee,
          isHourlyRoom: isFloorVisible == true ? '1' : '0',
          ...userMsg,
        };

        setdataMsg(data); // 传给子组件
        setGetcardMsg(data2); // 穿给父组件提交入住记录
        setuseMsgFlag(true);
      }
    } catch (error) {
      console.error('Validation Failed:', error);

      if (!error.errorFields) {
        message.info(intl.formatMessage({ id: 'business.The room has expired.' }));
      }
    }
  };

  // 敲回车焦点向后移
  const inputRefs = Array.from({ length: 4 }).map(() => useRef(null));
  const handleKeyDown =
    (index: number) =>
    (e: any): any => {
      if (e.key === 'Enter') {
        const nextIndex = index + 1;
        if (nextIndex < inputRefs.length) {
          if (nextIndex == 2) return false;
          inputRefs[nextIndex].current.focus();
        } else {
          e.preventDefault();
        }
      }
    };
  // 获取单选框中用户数据
  const [userMsgInfo, setuserMsgInfo] = useState<UserFaka | null>(null);
  // 判断删除后不能发卡使用状态控制
  const [useMsgFlag, setuseMsgFlag] = useState(true);
  const [UserNocardIssued, setUserNocardIssued] = useState<UserData[]>([]);
  const dispatch = useDispatch();
  // 确认发卡
  const ConfirmCard = async (): Promise<any> => {
    if (!userMsgInfo || useMsgFlag == false)
      return message.error(
        intl.formatMessage({ id: 'business.Please select a user before issuing the card.' }),
      );
    if (userMsgInfo.cmdInfo && useChangeFlag == false) {
      return message.error(
        intl.formatMessage({ id: 'business.The customer has issued the card.' }),
      );
    }
    const values1 = await form1.validateFields();
    const values2 = await form2.validateFields();
    const now = dayjs();
    let timerAA = ''; // 获取发卡时间
    let Roomid = ''; // 判断是否点击退卡弹出的框 记录Roomid
    let changetimer: string = '';
    if (userMsg.status == 3 && userMsg.checkInHourlyRoom == 0) {
      // 发卡后 普通开房时间
      changetimer = dayjs(values1.checkOut.$d).format('YYYY-MM-DD HH:mm:ss');
    } else {
      if (userMsg.checkInHourlyRoom == 1 && isFloorVisible == true) {
        // 发卡后 钟点房时间
        changetimer = dayjs(values1.checkOut.$d).format('YYYY-MM-DD HH:mm:ss');
      } else if (isFloorVisible == true && userMsg.status == 1) {
        // 钟点房开房时间
        changetimer = dayjs(values1.checkOutTEO.$d).format('YYYY-MM-DD HH:mm:ss');
      } else {
        // 普通开房时间
        changetimer = dayjs(values1.checkOutTEO.$d).format('YYYY-MM-DD HH:mm:ss');
      }
    }
    let result = await GetRoomTimer(userMsg.roomId);
    if (userMsg.cmdInfo) {
      // 判断如果是点击退卡弹出的框
      Roomid = JSON.parse(userMsg.cmdInfo).roomid;
    }
    if (result.code == 0) {
      timerAA = result.data.expire_date;
      if (userMsg.childRooms) {
        // 判断是否是套房

        let data = {
          cardclass: 'guestcard',
          roomid: selectedOption ? selectedOption : Roomid,
          begintime: timerAA,
          endtime: changetimer,
          groupid: '0',
          t1: state.T1,
          t2: state.T2,
          t3: state.T3,
          t4: state.T4,
          t5: state.T5,
          t6: state.T6,
          t7: state.T7,
          t8: state.T8,
          roomlist: '',
          uuid: 'guestcard',
        };
        let data2 = {
          username: values2.username,
          phone: values2.phone,
          idcard: now.format('YYYY-MM-DD HH:mm:ss'),
          cardId: '未发房卡',
          roomId: userMsg.roomNo,
          endtime: changetimer,
          source: values1.UseroomFee,
          isHourlyRoom: isFloorVisible == true ? '1' : '0',
          ...userMsg,
        };
        let list = UserNocardIssued.map((item) => {
          let {
            roomNo,
            status,
            checkInEndTime,
            checkInHourlyRoom,
            checkInSource,
            checkInStartTime,
            expire_time,
            childRooms,
            subRoomCount,
            checkInIdCard,
            checkInMobile,
            checkInPeople,
            ...rest
          } = userMsg;
          item.status = '0';
          return { ...item, ...rest };
        });

        dispatch(changeRoomChinkList(list));
        let {
          roomNostatus,
          checkInEndTime,
          checkInHourlyRoom,
          checkInSource,
          checkInStartTime,
          expire_time,
          subRoomCount,
          checkInIdCard,
          checkInMobile,
          checkInPeople,
          ...result
        } = userMsg;
        setchildRoomNum(userMsgInfo.roomNo);
        dispatch(changeTrueList({ ...userMsgInfo, ...result }));
        if (userMsg.status === 3) {
          setGETID(userMsgInfo.id ? userMsgInfo.id : '0');
        } else {
          setGETID(userMsgInfo.id ? userMsgInfo.id : '0');
        }
        setGetcardMsg(data2); // 穿给父组件
        // setsendMsg(data)

        let res = await SendCard(data);
        if (res.result != 0) return message.error(res.msg);
        console.log(res);
        setsendMsg(data);
        setGetcardMsg(data2);
        setCardMessage(res);
        setType('客人卡,发卡成功');
        setXzday(true);
      } else {
        // 普通房间发卡

        let data = {
          cardclass: 'guestcard',
          roomid: userMsg.roomId ? userMsg.roomId : Roomid,
          begintime: timerAA,
          endtime: changetimer,
          groupid: '0',
          t1: state.T1,
          t2: state.T2,
          t3: state.T3,
          t4: state.T4,
          t5: state.T5,
          t6: state.T6,
          t7: state.T7,
          t8: state.T8,
          roomlist: '',
          uuid: 'guestcard',
        };

        let data2 = {
          username: userMsgInfo.realName,
          phone: userMsgInfo.mobile,
          idcard: now.format('YYYY-MM-DD HH:mm:ss'),
          cardId: '未发房卡',
          roomId: userMsg.roomName,
          endtime: changetimer,
          source: values1.UseroomFee,
          isHourlyRoom: isFloorVisible == true ? '1' : '0',
          ...userMsg,
        };
        // 所有的数据
        console.log('UserNocardIssued', UserNocardIssued);
        let list = UserNocardIssued.map((item) => {
          let {
            status,
            checkInEndTime,
            checkInHourlyRoom,
            checkInSource,
            checkInStartTime,
            expire_time,
            childRooms,
            subRoomCount,
            checkInIdCard,
            checkInMobile,
            checkInPeople,
            ...rest
          } = userMsg;
          item.status = '0';
          return { ...item, ...rest };
        });
        dispatch(changeRoomChinkList(list));
        dispatch(changeTrueList({ ...userMsgInfo, ...userMsg }));
        if (userMsg.status === 3) {
          setGETID(userMsgInfo.id ? userMsgInfo.id : '0');
        } else {
          setGETID(userMsgInfo.id ? userMsgInfo.id : '0');
        }

        console.log('roomfunc', data);

        let res = await SendCard(data);
        if (res.result != 0) return message.error(res.msg);
        console.log(res);
        setsendMsg(data);
        setGetcardMsg(data2);
        setCardMessage(res);
        setType('客人卡,发卡成功');
        setXzday(true);
      }
    }
  };

  const useDebounce = (func: (...args: any[]) => void, delay: number) => {
    const timeoutRef = useRef<NodeJS.Timeout | null>(null);

    return useCallback(
      (...args: any[]) => {
        if (timeoutRef.current) {
          clearTimeout(timeoutRef.current);
        }
        timeoutRef.current = setTimeout(() => {
          func(...args);
        }, delay);
      },
      [func, delay],
    );
  };
  const debouncedConfirmCard = useDebounce(ConfirmCard, 300);

  const handleClick = useCallback(() => {
    debouncedConfirmCard();
  }, [debouncedConfirmCard]);
  // 退卡
  const [userListLength, setuserListLength] = useState(''); // 获取用户数组的长度
  const [lengthFlag, setlengthFlag] = useState(false);

  // 监听列表房卡的再用状态
  useEffect(() => {
    if (userListLength) {
      if (userListLength == '1') {
        setlengthFlag(true);
      } else {
        setlengthFlag(false);
      }
    }
    if (userListLength == '0') {
      setlengthFlag(false);
    }
  }, [userListLength]);
  const changeOutCadr = async () => {
    if (userListLength == '0') {
      useDeleteConfirm(
        `${userMsg.checkInPeople} ${intl.formatMessage({ id: 'business.Are you sure you want to check out without the room card' })}`,
        '',
        async (res) => {
          if (res == true) {
            let result = await NoCardcheckout(userMsg.roomId);
            if (result.code == 0) {
              message.success(
                intl.formatMessage({ id: 'business.Checkout without a card was successful' }),
              );
              handleOk();
            }
          }
        },
      );
    } else {
      if (userMsgInfo) {
        if (userMsgInfo.status != '2') {
          let res = await Read_Card();
          if (res.msg == '空卡') return message.error(res.msg);
          setCardMessage(res);
          setType('退卡成功前读卡');
          dispatch(setGetNowCardMsg(userMsgInfo));
        } else {
          message.error(intl.formatMessage({ id: 'business.The card has been returned' }));
        }
      } else {
        message.error(
          intl.formatMessage({ id: 'business.Please select a record before returning the card' }),
        );
      }
    }
  };

  const confirm = async (e: React.MouseEvent<HTMLElement>) => {
    if (userMsgInfo) {
      if (userMsgInfo.status != '2') {
        let res = await Read_Card();
        if (res.msg == '空卡') return message.error(res.msg);
        setCardMessage(res);
        setType('退卡成功前读卡2');
        dispatch(setGetNowCardMsg(userMsgInfo));
      } else {
        message.error(intl.formatMessage({ id: 'business.The card has been returned' }));
      }
    } else {
      message.error(
        intl.formatMessage({ id: 'business.Please select a record before returning the card' }),
      );
    }
  };

  const cancel = (e: React.MouseEvent<HTMLElement>) => {
    console.log(e);
  };

  const handleSwitchChange = (checked: boolean | ((prevState: boolean) => boolean)) => {
    setIsFloorVisible(checked);
  };
  const phoneRegExp = /^1[3456789]\d{9}$/; // 手机号正则表达式

  // 续住天数
  const handleChangeDay = (value: string) => {
    setuseChangeFlag(true);
    setuseMsgFlag(true);
    form1.setFieldValue(
      'checkOut',
      moment().add(parseInt(value), 'days').startOf('day').add(TRoomTimer, 'hours'),
    );
  };
  const changeTimer = (value: { $d: string }) => {
    if (value) {
      setuseChangeFlag(true);
      setuseMsgFlag(true);

      let changetimer = dayjs(value.$d).format('YYYY-MM-DD HH:mm:ss');
      const inputTime = dayjs(changetimer);
      const currentTime = dayjs().startOf('day');
      const diffDays = Math.max(inputTime.diff(currentTime, 'day'), 1);

      form1.setFieldValue('Stay', diffDays);
      form1.setFieldValue('renewal', diffDays);
    }
  };

  const handleChangeDay2 = (value: string) => {
    setuseChangeFlag(true);
    setuseMsgFlag(true);
    form1.setFieldValue(
      'checkOutTEO',
      moment().add(parseInt(value), 'days').startOf('day').add(TRoomTimer, 'hours'),
    );
  };

  const changeTimer2 = (value: { $d: string }) => {
    if (value) {
      setuseChangeFlag(true);
      setuseMsgFlag(true);
      let changetimer = dayjs(value.$d).format('YYYY-MM-DD HH:mm:ss');
      const inputTime = dayjs(changetimer);
      const currentTime = dayjs().startOf('day');
      const diffDays = Math.max(inputTime.diff(currentTime, 'day'), 1);
      form1.setFieldValue('Stay', diffDays);
      form1.setFieldValue('renewal', diffDays);
    }
  };

  return (
    <div className="RoomAllPei" style={{ display: 'flex' }}>
      <div style={{width: 270}}>
        <Form form={form1} labelCol={{ span: 24 }} wrapperCol={{ span: 5 }}>
          {userMsg.status != 3 && (
            <div>
              &nbsp;{intl.formatMessage({ id: 'business.Hourly room' })} :&emsp;{' '}
              <Switch
                checkedChildren={intl.formatMessage({ id: 'business.yes' })}
                unCheckedChildren={intl.formatMessage({ id: 'business.no' })}
                checked={isFloorVisible}
                onChange={handleSwitchChange}
                disabled={HourlyRoomflag}
              />
            </div>
          )}

          {/* <p></p> */}
          <div className="RoomPeter">
            <Form.Item
              label={intl.formatMessage({ id: 'business.Guest source' })}
              name="UseroomFee"
              rules={[{ required: true }]}
            >
              <Select
                // onChange={handleSelectChange}
                className="custom_dropdown"
                placeholder="到店来源"
                allowClear
                disabled={isFloorVisible}
                style={{ width: '230px' }}
              >
                {source.map((item: any, index: number) => (
                  <Select.Option key={index} value={item}>
                    {item}
                  </Select.Option>
                ))}
              </Select>
            </Form.Item>
          </div>
          <div className="RoomPeter">
            {/* 入住的判断 */}
            {userMsg.checkInStartTime != null ? (
              <Form.Item
                label={intl.formatMessage({ id: 'business.Check-in time' })}
                name="checkIn"
                initialValue={moment(userMsg.checkInStartTime)}
                rules={[{ required: true }]}
              >
                <DatePicker style={{ width: '230px' }} disabled format="YYYY-MM-DD HH:mm:ss" />
                {/* <Input type="text" disabled /> */}
              </Form.Item>
            ) : (
              <Form.Item
                label={intl.formatMessage({ id: 'business.Check-in time' })}
                name="usercheckIn"
                rules={[{ required: true }]}
                initialValue={checkIntimer}
              >
                <DatePicker
                  showTime
                  format="YYYY-MM-DD HH:mm:ss"
                  style={{ width: '230px' }}
                  disabled
                />
              </Form.Item>
            )}
            {/* 续住的判断 */}
            {userMsg.checkInStartTime != null ? (
              <Form.Item
                label={intl.formatMessage({ id: 'business.Check-out time' })}
                name="checkOut"
                initialValue={moment(userMsg.checkInEndTime)}
                rules={[{ required: true }]}
              >
                <DatePicker
                  style={{ width: '230px' }}
                  showTime
                  format="YYYY-MM-DD HH:mm:ss"
                  disabled={isFloorVisible}
                  onChange={changeTimer}
                />
              </Form.Item>
            ) : (
              <Form.Item
                label={intl.formatMessage({ id: 'business.Check-out time' })}
                name="checkOutTEO"
                rules={[{ required: true }]}
              >
                <DatePicker
                  style={{ width: '230px' }}
                  className="DatePicker"
                  showTime
                  format="YYYY-MM-DD HH:mm:ss"
                  disabled={isFloorVisible}
                  onChange={changeTimer2}
                />
              </Form.Item>
            )}
          </div>
          <div className="RoomPeter">
            {userMsg.checkInStartTime != null ? (
              <>
                <Form.Item
                  label={intl.formatMessage({ id: 'business.Keep staying Days' })}
                  name="renewal"
                  style={{ marginLeft: '10px' }}
                >
                  {/* <Segmented options={['1天', '2天', '3天', '4天', '5天']} style={{ width: "230px" }} onChange={(value) => handleSelectDay(value, 'checkOut')} disabled={isFloorVisible} /> */}
                  <Select
                    disabled={isFloorVisible}
                    options={Option1}
                    style={{ width: 230 }}
                    onChange={handleChangeDay}
                  />
                </Form.Item>
              </>
            ) : (
              <Form.Item
                label={intl.formatMessage({ id: 'business.Move in Days' })}
                name="Stay"
                style={{ marginLeft: '10px' }}
              >
                {/* <Segmented options={['1天', '2天', '3天', '4天', '5天']} style={{ width: "230px" }} onChange={(value) => handleSelectDay(value, 'checkOutTEO')} disabled={isFloorVisible} /> */}
                <Select
                  disabled={isFloorVisible}
                  defaultValue="1天"
                  style={{ width: 230 }}
                  options={Option1}
                  onChange={handleChangeDay2}
                />
              </Form.Item>
            )}
          </div>
        </Form>
        {/* <div className='titleF'>续住天数是更具当前时间来计算</div> */}
      </div>

      <div className="boderLeft">
        <Form form={form2}>
          <Row gutter={24}>
            &emsp;
            <Col span={11}>
              <Form.Item
                label={intl.formatMessage({ id: 'business.Name' })}
                name="username"
                rules={[{ required: true }]}
              >
                <Input
                  prefix={<UserOutlined />}
                  style={{ width: '200px' }}
                  ref={inputRefs[0]}
                  onKeyDown={handleKeyDown(0)}
                />
              </Form.Item>
            </Col>
            &emsp;{' '}
            <Col span={11}>
              <Form.Item
                label={intl.formatMessage({ id: 'business.Mobile' })}
                name="phone"
                rules={[
                  { required: true },
                  {
                    pattern: phoneRegExp,
                    message: intl.formatMessage({
                      id: 'business.Please enter the correct phone number',
                    }),
                  },
                ]}
              >
                <Input
                  prefix={<MobileOutlined />}
                  style={{ width: '200px' }}
                  ref={inputRefs[1]}
                  onKeyDown={handleKeyDown(1)}
                />
              </Form.Item>
            </Col>
          </Row>
          <Row gutter={24}>
            <Col span={10}>
              {userMsg.childRooms ? (
                <div className="RoomPeter">
                  <Form.Item
                    label={intl.formatMessage({ id: 'business.Choose room' })}
                    name="childroom"
                    style={{ width: '255px' }}
                    rules={[{ required: true }]}
                  >
                    <Select
                      onChange={handleSelectChange}
                      className="custom_dropdown"
                      placeholder={intl.formatMessage({ id: 'business.Please select a subroom' })}
                      allowClear
                      style={{ width: '200px' }}
                      ref={inputRefs[3]}
                      onKeyDown={handleKeyDown(3)}
                    >
                      {userMsg.childRooms.map((item: any, index: number) => (
                        <Select.Option key={index} value={item.roomId}>
                          {item.roomName}
                        </Select.Option>
                      ))}
                    </Select>
                  </Form.Item>
                  <Form.Item>
                    &emsp;&emsp;&emsp;&emsp;&nbsp;{' '}
                    <Button type="primary" onClick={() => handleSubmit()}>
                      {intl.formatMessage({ id: 'business.Add occupants' })}
                    </Button>
                  </Form.Item>
                </div>
              ) : (
                <div>
                  <Form.Item>
                    &emsp;&emsp;&emsp;&emsp;&nbsp;
                    <Button type="primary" onClick={() => handleSubmit()}>
                      {intl.formatMessage({ id: 'business.Add occupants' })}
                    </Button>
                  </Form.Item>
                </div>
              )}
            </Col>
          </Row>
        </Form>
        <CurrentUser
          userMsg={userMsg}
          dataMsg={dataMsg}
          setuserMsgInfo={setuserMsgInfo}
          setUserNocardIssued={setUserNocardIssued}
          setuseMsgFlag={setuseMsgFlag}
          setuserListLength={setuserListLength}
          setsendMsg={setsendMsg}
          setType={setType}
        />
        <br />
        <div style={{ float: 'right' }} className="endcard">
          {userMsg.isHourlyRoom != 1 && Cardname != '退卡' && userMsg.status != 9 && (
            <>
              <Button
                type="primary"
                onClick={() => {
                  handleClick();
                }}
              >
                {intl.formatMessage({ id: 'business.Issuing' })}
              </Button>{' '}
              &emsp;
            </>
          )}
          {/* 判断之后入住房才能退卡 */}
          {(userMsg.status == 3 || userMsg.status == 9) && Cardname != '续卡' && (
            <>
              {lengthFlag ? (
                <Popconfirm
                  title={intl.formatMessage({
                    id: 'business.This card is the last room card in this room',
                  })}
                  description={intl.formatMessage({ id: 'business.Confirm the return card' })}
                  onConfirm={confirm}
                  onCancel={cancel}
                  okText="Yes"
                  cancelText="No"
                >
                  <Button type="primary" style={{ backgroundColor: 'purple' }}>
                    {intl.formatMessage({ id: 'business.Return the card' })}
                  </Button>{' '}
                  &emsp;
                </Popconfirm>
              ) : (
                <>
                  <Button
                    type="primary"
                    style={{ backgroundColor: 'purple' }}
                    onClick={() => {
                      changeOutCadr();
                    }}
                  >
                    {intl.formatMessage({ id: 'business.Return the card' })}
                  </Button>{' '}
                  &emsp;
                </>
              )}
            </>
          )}
        </div>
      </div>
    </div>
  );
};

export default InformationCard;
